<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>校友论坛</title>
  <!-- 引入Bootstrap CSS -->
  <link rel="stylesheet" href="../asset/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../asset/css/nav.css">
  <style>
    .post, .reply {
      border: 1px solid #ddd;
      border-radius: 5px;
      margin-bottom: 20px;
      padding: 15px;
    }
    .post-author, .reply-author {
      font-weight: bold;
    }
    .post-author {
      color: #007bff;
    }
    .reply-author {
      color: #28a745;
    }
    .reply {
      margin-left: 40px;
      border-left: 2px solid #ddd;
      padding-left: 10px;
    }
    .like-btn {
      color: #6c757d;
    }
    .liked {
      color: #dc3545;
    }
  </style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">校友交流系统</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="../index.html">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="xiaoyou_minglu.html">校友名录</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="xiaoyyou_xiangqin.html">校友相亲</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="xiaoyou_juanzeng.html">捐赠信息</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="xiaoyou_luntan.html">校友论坛</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="call_us.html">联系我们</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- 论坛内容 -->
<div class="container mt-4">
  <h1>校友论坛</h1>

  <!-- 帖子 -->
  <div class="post">
    <div class="post-author">张三</div>
    <div class="post-content">欢迎大家在校友论坛交流心得和经验！</div>
    <button class="btn btn-sm btn-outline-primary like-btn" onclick="toggleLike(this)" data-count="0">
      <span class="like-icon">👍</span> <span class="like-count">0</span>
    </button>
    <button class="btn btn-sm btn-primary mt-2" data-bs-toggle="collapse" data-bs-target="#reply1">回复</button>
    <div class="collapse mt-3" id="reply1">
      <div class="reply">
        <div class="reply-author">李四</div>
        <div>感谢发起这个论坛，太棒了！</div>
        <button class="btn btn-sm btn-outline-success like-btn" onclick="toggleLike(this)" data-count="0">
          <span class="like-icon">👍</span> <span class="like-count">0</span>
        </button>
      </div>
      <div class="reply">
        <div class="reply-author">王五</div>
        <div>是的，这是一个很好的交流平台。</div>
        <button class="btn btn-sm btn-outline-success like-btn" onclick="toggleLike(this)" data-count="0">
          <span class="like-icon">👍</span> <span class="like-count">0</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 另一个帖子 -->
  <div class="post">
    <div class="post-author">赵六</div>
    <div class="post-content">感觉我的生活如同死水</div>
    <button class="btn btn-sm btn-outline-primary like-btn" onclick="toggleLike(this)" data-count="0">
      <span class="like-icon">👍</span> <span class="like-count">0</span>
    </button>
    <button class="btn btn-sm btn-primary mt-2" data-bs-toggle="collapse" data-bs-target="#reply2">回复</button>
    <div class="collapse mt-3" id="reply2">
      <div class="reply">
        <div class="reply-author">小红</div>
        <div>抱歉，你的语言中好像出现了水门，我可以认为你对死水进行了评价，叮，已触发关键词🤓我个人觉得波风水门【秽土转生】真的是最需要操作的忍者了。
          我对操作的定义就是这件事你知道怎么做但是你做不到。 在目前的所有忍者中只有死水能让我有这种体验。 不说别的，被先手了替身2A插标闪走，这套操作没玩个几百把是真的做不到的，90%的人想做到这套操作都会发现自己2A根本插不出标来，训练营和决斗场的心理压力是不一样的，你在训练营就算能百分百做到2A插标，决斗场也90%的情况是2A插不出来。我玩骨架白面具破面小土豆，看到对面玩死水，就知道自己低人一等了，对面换位金身博弈我也是心服口服的，抓不到对面只能说我玩不明白死水，死水玩家摸头发表情我也是羞愧难当的，毕竟玩死水的绝对是全火影最需要操作的，我这种玩🐶脑忍者的不能去攻击操作忍者的。我以后在火影忍者手游里，我以后再也不敢说秽土水门这个忍者的任何坏话，我承认死水这个忍者确实是要技术的，cd的，阳间的，老忍者的，没抓取的，没反手的，被起手玩不了的，没有通灵秘卷t3的，伤害低的，要博弈的，z闪是难触发的，非常极端的，会被骨架克的，打不过儿子黄猿的，必须加强</div>
        <button class="btn btn-sm btn-outline-success like-btn" onclick="toggleLike(this)" data-count="0">
          <span class="like-icon">👍</span> <span class="like-count">0</span>
        </button>
      </div>
      <div class="reply">
        <div class="reply-author">小明</div>
        <div>抱歉，你的语言中好像出现了水门，我可以认为你对死水进行了评价，叮，已触发关键词🤓我个人觉得波风水门【秽土转生】真的是最需要操作的忍者了。
          我对操作的定义就是这件事你知道怎么做但是你做不到。 在目前的所有忍者中只有死水能让我有这种体验。 不说别的，被先手了替身2A插标闪走，这套操作没玩个几百把是真的做不到的，90%的人想做到这套操作都会发现自己2A根本插不出标来，训练营和决斗场的心理压力是不一样的，你在训练营就算能百分百做到2A插标，决斗场也90%的情况是2A插不出来。我玩骨架白面具破面小土豆，看到对面玩死水，就知道自己低人一等了，对面换位金身博弈我也是心服口服的，抓不到对面只能说我玩不明白死水，死水玩家摸头发表情我也是羞愧难当的，毕竟玩死水的绝对是全火影最需要操作的，我这种玩🐶脑忍者的不能去攻击操作忍者的。我以后在火影忍者手游里，我以后再也不敢说秽土水门这个忍者的任何坏话，我承认死水这个忍者确实是要技术的，cd的，阳间的，老忍者的，没抓取的，没反手的，被起手玩不了的，没有通灵秘卷t3的，伤害低的，要博弈的，z闪是难触发的，非常极端的，会被骨架克的，打不过儿子黄猿的，必须加强</div>
        <button class="btn btn-sm btn-outline-success like-btn" onclick="toggleLike(this)" data-count="0">
          <span class="like-icon">👍</span> <span class="like-count">0</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 发布新帖子的表单 -->
  <div class="card mt-4">
    <div class="card-body">
      <h5 class="card-title">发布新帖子</h5>
      <form>
        <div class="mb-3">
          <label for="postTitle" class="form-label">标题</label>
          <input type="text" class="form-control" id="postTitle" placeholder="请输入标题">
        </div>
        <div class="mb-3">
          <label for="postContent" class="form-label">内容</label>
          <textarea class="form-control" id="postContent" rows="3" placeholder="请输入内容"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">发布</button>
      </form>
    </div>
  </div>
</div>

<!-- 引入Bootstrap JS -->
<script src="../asset/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js"></script>
<script>
  function toggleLike(button) {
    const likeCount = button.getAttribute('data-count');
    let count = parseInt(likeCount, 10);
    const likeCountSpan = button.querySelector('.like-count');

    if (button.classList.contains('liked')) {
      // 取消点赞
      button.classList.remove('liked');
      button.classList.add('btn-outline-primary', 'btn-outline-success');
      count--;
    } else {
      // 点赞
      button.classList.add('liked');
      button.classList.remove('btn-outline-primary', 'btn-outline-success');
      count++;
    }

    button.setAttribute('data-count', count);
    likeCountSpan.textContent = count;
  }
</script>
</body>
</html>
